<template>
  <div class="list-common-table">
    <!-- 查询表单部分 -->
    <div class="form-container">
      <div class="form-header">
        <img src="@/assets/icons/Rectangle 34624665.png" class="form-icon" />
        <span class="form-title">搜索条件</span>
      </div>
      <t-form
        ref="form"
        :data="formData"
        :label-width="80"
        colon
        @reset="onReset"
        @submit="onSubmit"
        :style="{ marginBottom: '8px' }"
      >
        <t-row>
          <t-col :span="10">
            <t-row :gutter="[16, 24]">
              <t-col :flex="1">
                <t-form-item label="酒店名称">
                  <t-input
                    v-model="formData.name"
                    type="search"
                    placeholder="请输入酒店名称"
                    :style="{ minWidth: '200px' }"
                  />
                </t-form-item>
              </t-col>
              <t-col :flex="1">
                <t-form-item label="签约方式">
                  <t-select style="min-width: 240px">
                    <t-option key="个人签约" value="个人签约"></t-option>
                    <t-option key="公司/法人签约" value="公司/法人签约"></t-option>
                    <t-option key="公司/授权签约" value="公司/授权签约"></t-option>
                  </t-select>
                </t-form-item>
              </t-col>
              <t-col :flex="1">
                <t-form-item label="审核状态">
                  <t-select style="min-width: 240px">
                    <t-option key="待审核" value="待审核"></t-option>
                    <t-option key="已审核" value="已审核"></t-option>
                  </t-select>
                </t-form-item>
              </t-col>
              <t-col :flex="1">
                <t-form-item label="酒店星级">
                  <t-select style="min-width: 240px">
                    <t-option key="其他" value="其他"></t-option>
                    <t-option key="二星级以下/经济" value="二星级以下/经济"></t-option>
                    <t-option key="三星级/舒适" value="三星级/舒适"></t-option>
                    <t-option key="四星级/高档" value="四星级/高档"></t-option>
                    <t-option key="五星级/豪华" value="五星级/豪华"></t-option>
                  </t-select>
                </t-form-item>
              </t-col>
              <t-col :flex="1">
                <t-form-item label="申请日期" name="no">
                  <t-space direction="vertical" style="min-width: 320px">
                    <t-date-range-picker allow-input clearable @pick="onPick" @change="onChange" />
                  </t-space>
                </t-form-item>
              </t-col>
            </t-row>
          </t-col>
          <t-col :span="1" class="operation-container">
            <t-button theme="primary" type="submit" :style="{ marginLeft: '8px' }">查询</t-button>
            <t-button type="reset" variant="base" theme="default">重置</t-button>
          </t-col>
        </t-row>
      </t-form>
    </div>

    <!-- 表格部分 -->
    <div class="table-container">
      <div class="table-header">
        <img src="@/assets/icons/Rectangle 34624665.png" class="table-icon" />
        <span class="table-title">入驻列表</span>
      </div>
      <t-table
        :data="data"
        :loading="isLoading"
        @change="rehandleChange"
        @page-change="onPageChange"
        @select-change="onSelectChange"
        :row-key="rowKey"
        :columns="columns"
        :pagination="pagination"
      >
        <!-- 自定义审核状态的单元格 -->
        <template #auditStatus="{ row }">
          <span :style="{ color: getAuditStatusColor(row.auditStatus) }">
            {{ row.auditStatus }}
          </span>
        </template>

        <!-- 自定义操作列的单元格 -->
        <template #cell-op="{ row }">
          <a class="t-button-link" @click="handleDetail(row)">详情</a>
          <a class="t-button-link" @click="handleAudit(row)">审核</a>
        </template>
      </t-table>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: [],
      isLoading: false,
      rowKey: 'id',
      formData: {
        name: '',
        no: undefined,
        status: undefined,
      },
      columns: [
        {
          title: 'ID',
          fixed: 'left',
          width: 200,
          align: 'left',
          ellipsis: true,
          colKey: 'id',
        },
        {
          title: '用户账号',
          fixed: 'left',
          width: 200,
          align: 'left',
          ellipsis: true,
          colKey: 'userAccount',
        },
        {
          title: '酒店名称',
          fixed: 'left',
          width: 200,
          align: 'left',
          ellipsis: true,
          colKey: 'hotelName',
        },
        {
          title: '酒店星级',
          fixed: 'left',
          width: 200,
          align: 'left',
          ellipsis: true,
          colKey: 'hotelStar',
        },
        {
          title: '签约方式',
          fixed: 'left',
          width: 200,
          align: 'left',
          ellipsis: true,
          colKey: 'signType',
        },
        {
          title: '审核状态',
          colKey: 'auditStatus',
          width: 200,
        },
        {
          title: '处理人',
          fixed: 'left',
          width: 200,
          align: 'left',
          ellipsis: true,
          colKey: 'auditPerson',
        },
        {
          title: '申请时间',
          fixed: 'left',
          width: 200,
          align: 'left',
          ellipsis: true,
          colKey: 'applyTime',
        },
        {
          title: '处理时间',
          fixed: 'left',
          width: 200,
          align: 'left',
          ellipsis: true,
          colKey: 'auditTime',
        },
        {
          align: 'left',
          fixed: 'right',
          width: 200,
          colKey: 'op',
          title: '操作',
        },
      ],
      pagination: {
        current: 1,
        pageSize: 10,
        showJumper: true,
        onChange: (pageInfo) => {
          console.log('pagination.onChange', pageInfo);
        },
      },
    };
  },
  async mounted() {
    await this.fetchData({
      current: this.pagination.current || this.pagination.defaultCurrent,
      pageSize: this.pagination.pageSize || this.pagination.defaultPageSize,
    });
  },
  methods: {
    async fetchData(pagination = this.pagination) {
      const { current, pageSize } = pagination;
      this.isLoading = true;
      try {
        const res = await this.$request.get(`/api/admin/hotel/Settle/page?pageSize=${pageSize}&pageNum=${current}`);
        const list = res.data.data.records;
        console.log('Fetched Data:', list);
        this.data = list;
        this.pagination = {
          ...this.pagination,
          total: res.data.data.total,
          current: res.data.data.current,
          pageSize: res.data.data.size,
        };
      } catch (e) {
        console.error('Error fetching data:', e);
      } finally {
        this.isLoading = false;
      }
    },
    rehandleChange(changeParams, triggerAndData) {
      console.log('Change event triggered:', changeParams, triggerAndData);
    },
    async onPageChange(pageInfo) {
      console.log('Page change event:', pageInfo);
      this.pagination.current = pageInfo.current;
      this.pagination.pageSize = pageInfo.pageSize;
      await this.fetchData(pageInfo);
    },
    onSelectChange(value, { selectedRowData }) {
      console.log('Select change event:', value, selectedRowData);
    },
    getAuditStatusColor(auditStatus) {
      // 动态返回颜色
      return auditStatus === '待审核' ? '#FA9550' : '#56C08D';
    },
    handleDetail(row) {
      console.log('Detail clicked for row:', row);
      // 在这里处理详情按钮点击逻辑
    },
    handleAudit(row) {
      console.log('Audit clicked for row:', row);
      // 在这里处理审核按钮点击逻辑
    },
    onSubmit(data) {
      console.log(data);
    },
    onReset() {
      this.$message.success('重置成功');
    },
    onPick(value, context) {
      console.log('onPick:', value, context);
    },
    onChange(value, context) {
      console.log('onChange:', value, context);
      console.log(
        'timestamp:',
        context.dayjsValue.map((d) => d.valueOf()),
      );
      console.log(
        'YYYYMMDD:',
        context.dayjsValue.map((d) => d.format('YYYYMMDD')),
      );
    },
  },
};
</script>

<style scoped>
.form-container {
  padding: 16px;
  background: #ffffff;
  border-radius: 4px;
  margin-bottom: 16px;
}

.form-header {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}

.form-icon {
  width: 4px;
  height: 21px;
  background: #3270ff;
  border-radius: 1px;
  margin-right: 8px;
}

.form-title {
  width: 85px;
  height: 32px;
  font-family: PingFang SC, PingFang SC;
  font-weight: 600;
  font-size: 21px;
  color: rgba(0, 0, 0, 0.9);
  line-height: 32px;
  text-align: left;
  font-style: normal;
  text-transform: none;
}

.table-container {
  padding: 16px;
  background: #ffffff;
  border-radius: 4px;
}

.table-header {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}

.table-icon {
  width: 4px;
  height: 21px;
  background: #3270ff;
  border-radius: 1px;
  margin-right: 8px;
}

.table-title {
  width: 85px;
  height: 32px;
  font-family: PingFang SC, PingFang SC;
  font-weight: 600;
  font-size: 21px;
  color: rgba(0, 0, 0, 0.9);
  line-height: 32px;
  text-align: left;
  font-style: normal;
  text-transform: none;
}

.form-item-content {
  width: 267px;
  height: 43px;
  background: #ffffff;
  border-radius: 4px;
  border: 1px solid #dcdcdc;
}

.operation-container {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.t-button + .t-button {
  margin-left: 8px;
}

.t-button-link {
  color: #0052d9;
  cursor: pointer;
  text-decoration: none;
}
</style>
